<template>
  <div class="box">
    <el-row class="tac">
      <el-col
        :span="12"
        :style="{
          width: isCollapse ? '70px' : sidebarWidth,
          position: 'relative',
          transition: 'width 0.3s ease-in-out',
        }"
      >
      <img v-if="!isCollapse" src="../assets/logo-w-n.png" alt="" style="width: 100%;">
        <!-- <h3
          v-if="!isCollapse"
          style="color: #ffffff; line-height: 50px; text-indent: 1rem;background-image: url(../assets/logo0.jpg);"
        >

          维修助手
        </h3> -->

        <el-radio-group
          v-model="isCollapse"
          style="
            margin-bottom: 0px;
            margin-left: 15px;
            position: absolute;
            top: 18px;
            right: -17px;
            z-index: 10;
          "
        >
          <el-radio-button
            :label="true"
            @click="toggleSidebar(false)"
            v-show="!isCollapse"
          >
            <i class="el-icon-d-arrow-left"></i>
          </el-radio-button>
          <el-radio-button
            :label="false"
            @click="toggleSidebar(true)"
            v-show="isCollapse"
          >
            <i class="el-icon-d-arrow-right"></i>
          </el-radio-button>
        </el-radio-group>
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          :collapse="isCollapse"
          :default-active="activePath"
          :default-openeds="[
            '/backmanage/PartManage',
            '/backmanage/RepaireManage',
            '/backmanage/usermanage',
            '/backmanage/InventManage',
            '/backmanage/MaintSearch',
            '/backmanage/MaintEfficiency',
            '/backmanage/InventSearch',
            '/backmanage/RolesManage',
            '/backmanage/PermissionManage',
            '/backmanage/MenuManage',
            '/backmanage/EditInfo',
            '/backmanage/GoodsCategory',
          ]"
        >
          <el-menu-item index="/backmanage/BackendHome">
            <i class="el-icon-cpu"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-submenu index="/backmanage/usermanage">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/usermanage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-user-solid"></i>用户列表</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/backmanage/PartManage">
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span slot="title">部门管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/PartManage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-management"></i>部门列表</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/backmanage/RepaireManage">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span slot="title">报修管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/RepaireManage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-cooperation"></i>报修列表</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/backmanage/InventManage">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span slot="title">库存管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/GoodsCategory"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-home"></i>商品列表</el-menu-item
              >
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/InventManage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-home"></i>使用记录</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/backmanage/MaintSearch">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">统计分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/MaintSearch"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-opportunity"></i>维修分析</el-menu-item
              >
              <el-menu-item
                index="/backmanage/MaintEfficiency"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-data"></i>维修效率</el-menu-item
              >
              <el-menu-item
                index="/backmanage/InventSearch"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-home"></i>库存分析</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/backmanage/PermissionManage">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">权限管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/RolesManage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-user"></i>角色管理</el-menu-item
              >
              <el-menu-item
                index="/backmanage/PermissionManage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-warning"></i>权限管理</el-menu-item
              >
              <el-menu-item
                index="/backmanage/MenuManage"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-s-order"></i>菜单管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/backmanage/EditInfo">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/backmanage/EditInfo"
                style="height: 30px; line-height: 30px"
                ><i class="el-icon-upload"></i>修改信息</el-menu-item
              >
              <el-menu-item
                style="height: 30px; line-height: 30px"
                id="tuichu"
                @click="logout"
                ><i class="el-icon-s-unfold"></i>退出登录</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <div class="right" style="background-color: #f5f5f5;height: 100vh;">
        <router-view></router-view>
      </div>
    </el-row>
  </div>
</template>
<script>
import http from "@/api/http";
export default {
  data() {
    return {
      // defaultOpenItems:['/backmanage/PartManage','/backmanage/RepaireManage'],
      defaultOpenItems: ["/backmanage/PartManage", "/backmanage/RepaireManage"],
      isCollapse: true,
      activePath: this.$route.path,
      sidebarWidth: "15%", // 导航栏的宽度
      // defaultOpenSubMenu:['/backmanage/PartManage','/backmanage/RepaireManage']
    };
  },
  methods: {
    toggleSidebar(collapse) {
      this.isCollapse = !this.isCollapse;
      this.sidebarWidth = collapse ? "60px" : "15%";
    },
    // 退出登录
    logout() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const token = localStorage.getItem("token");
          // 假设http是一个已经配置好的axios实例
          http
            .get("/user/logout", {
              headers: {
                Authorization: token,
              },
            })
            .then((res) => {
              console.log(res);
              const token = res.token;
              localStorage.setItem("token", token);
              localStorage.setItem("token_is_exp", 1);
              localStorage.removeItem("account");
              localStorage.removeItem("repaire");
              // localStorage.clear();
              this.$router
                .push("/login")
                .then(() => {
                  this.$message({
                    type: "success",
                    message: "已经安全退出!",
                  });
                })
                .catch((err) => {
                  console.log(err);
                  this.$message({
                    type: "success",
                    message: "已经安全退出!网页跳转失败",
                  });
                });
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  watch: {
    $route(newRoute) {
      this.activePath = newRoute.path;
    },
  },
};
</script>
<style scoped lang="less">
/deep/.el-menu-item,
.el-submenu__title {
  height: 45px;
  line-height: 45px;
  list-style: none;
}
.el-col-12[data-v-bb3c95a6] {
  width: 15%;
  height: 100vh;
  background-color: #304156;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 400px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
.el-col-12 {
  width: 15%;
  height: 100vh;
  background-color: rgb(48, 65, 86);
  ul {
    background-color: rgb(48, 65, 86);
    border-right: none;
  }
}
.box {
  height: 100vh;
  background: #333;
}
/deep/.el-menu-item-group__title {
  padding: 0 0 !important;
  line-height: normal;
  font-size: 12px;
  color: #909399;
}
#tuichu:active {
  color: rgb(255, 208, 75);
  background: rgb(38, 52, 69);
}
/deep/.el-radio-button__inner {
  padding: 2px 1px;
}
</style>